<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  width: {
    type: String,
    default: '100px'
  },
  height: {
    type: String,
    default: '40px'
  },
  length: {
    type: Number,
    default: 4
  },
  refresh: {
    type: Number
  }
});

const emit = defineEmits(['input']);

const codeList = ref([]);

const createdCode = () => {
  const len = props.length;
  const newCodeList = [];
  const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789';
  const charsLen = chars.length;
  // 生成
  for (let i = 0; i < len; i++) {
    const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)];
    newCodeList.push({
      code: chars.charAt(Math.floor(Math.random() * charsLen)),
      color: `rgb(${rgb})`,
      fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
      padding: `${[Math.floor(Math.random() * 10)]}px`,
      transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
    });
  }
  // 指向
  codeList.value = newCodeList;
  // 将当前数据派发出去
  // console.log(newCodeList.map(item => item.code).join(''));
  emit('input', newCodeList.map(item => item.code).join(''));
};

const getStyle = (data) => {
  return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
};

const refreshCode = () => {
  createdCode();
};

watch(() => props.refresh, () => {
  createdCode();
});

// 初始调用
createdCode();
</script>

<template>
  <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{ item.code }}</span>
  </div>
</template>

<style scoped>
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ValidCode span {
  display: inline-block;
}
</style>
